<template>
  <div class="content">
    <div class="title mb-10">pinia</div>

    <button @click="counter.increment">
      pinia引入计数测试: {{ counter.count }}
    </button>

    <div class="mt-30">
      <div class="title mb-10">Element Plus</div>
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>

    <div class="mt-30">
      <div class="title mb-10">ECharts</div>
      <div id="main" style="height: 350px; width: 1000px"></div>
    </div>

    <div class="mt-30">
      <div class="title mb-10">vue-plugin-hiprint</div>
      <button class="ml-20" @click="printingFun">点击打印</button>
    </div>

    <div class="mt-30">
      <div class="title mb-10">动态路由</div>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <template v-for="(item, index) in useStore.menus">
          <el-sub-menu
            v-if="item.children && item.children.length > 0"
            :index="item.path"
            :key="'submenu-' + index"
          >
            <template #title>{{ item.meta.title }}</template>
            <el-menu-item
              v-for="(child, cIndex) in item.children"
              :key="'child-' + cIndex"
              :index="child.path"
            >
              {{ child.meta.title || child.name }}
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item v-else :index="item.path" :key="'menu-' + index">
            {{ item.meta.title }}
          </el-menu-item>
        </template>
      </el-menu>
    </div>

    <div class="mt-30">
      <div class="title mb-10">按钮权限</div>
      <button class="ml-20" v-hasPermi="['admin']">
        有权限
      </button>
    </div>

    <div class="mt-30">
      <div class="title mb-10">mapbox</div>
      <button class="ml-20" @click="handleSelect('/webgis')">查看地图</button>
    </div>

    <div class="mt-30">
      <div class="title mb-10">静态图片动态引入</div>
      <el-image
        style="width: 100px; height: 100px; border-radius: 5px"
        class="mr-10"
        :src="headUrlTwo"
        fit="cover"
      />
      <el-image
        style="width: 100px; height: 100px; border-radius: 5px"
        :src="headUrl()"
        fit="cover"
      />
    </div>

    <div class="mt-30">
      <div class="title mb-10">防抖</div>
      <div
        style="
          width: 100px;
          height: 100px;
          border-radius: 5px;
          background-color: #47cbfc;
          text-align: center;
          color: aliceblue;
          display: flex;
          justify-content: center;
          align-items: center;
        "
        @mousemove="tempFunc()"
      >
        {{ fdNum }}
      </div>
    </div>

    <div class="mt-30">
      <div class="title mb-10">节流</div>
      <div
        style="
          width: 100px;
          height: 100px;
          border-radius: 5px;
          background-color: #47cbfc;
          text-align: center;
          color: aliceblue;
          display: flex;
          justify-content: center;
          align-items: center;
        "
        @mousemove="throttleFunc()"
      >
        {{ throttleNum }}
      </div>
    </div>

    <div class="mt-30">
      <div class="title mb-10">导入与导出</div>
      <div>
        <el-button icon="Download" type="warning" @click="handleImport">
          导入
        </el-button>
      </div>
    </div>

    <div class="mt-30">
      <div class="title mb-10">常用工具</div>
      <div class="twoTitle ml-10">时间工具（parseTime）：</div>
      <el-text class="ml-20">获取当前时间(new Date())： {{ timeVal }} </el-text>
      <el-text class="ml-20"
        >获取当前时间({y}-{m}-{d} {h}:{i}:{s})：
        {{ parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}") }}
      </el-text>
      <el-text class="ml-20"
        >获取当前时间({y}/{m}/{d} {h}:{i}:{s})：
        {{ parseTime(new Date(), "{y}/{m}/{d} {h}:{i}:{s}") }}
      </el-text>
      <el-text class="ml-20"
        >获取时间({y-m-d})： {{ parseTime(new Date(), "{y}-{m}-{d}") }}
      </el-text>
      <el-text class="ml-20"
        >获取年({y})： {{ parseTime(new Date(), "{y}") }}
      </el-text>
      <el-text class="ml-20"
        >获取月({m})： {{ parseTime(new Date(), "{m}") }}
      </el-text>
      <el-text class="ml-20"
        >获取日({d})： {{ parseTime(new Date(), "{d}") }}
      </el-text>

      <div class="twoTitle ml-10 mt-20">表单重置（resetForm）：</div>
      <el-text class="ml-20">示例： proxy.resetForm('queryRef')</el-text>

      <div class="twoTitle ml-10 mt-20">数据字典（useDict）：</div>
      <div class="ml-20 mt-10">
        <el-text class="ml-5">示例(标签)：</el-text>
        <div class="flexFS mt-10 ml-20 mb-10">
          <dict-tag :options="sys_yes_no" value="Y" />
          <dict-tag class="ml-10" :options="sys_yes_no" value="N" />
        </div>
        <el-text class="ml-5 mt-30">示例(文字)：</el-text>
        <div class="flexFS mt-10 ml-20 mb-10">
          <el-text class="ml-5">{{ selectDictLabel(sys_yes_no, "Y") }}</el-text>
          <el-text class="ml-20">{{
            selectDictLabel(sys_yes_no, "N")
          }}</el-text>
        </div>
      </div>
    </div>
    <!--打印插件  -->
    <printing style="display: none" ref="printingRef" />
  </div>

  <div class="catBox">
    <div>
      <img  src="@/assets/gif/cat.gif"   />
    </div>
    <el-text style="position: relative; top: -30px"
      >道阻且长，行则将至，行而不辍，未来可期</el-text
    >
  </div>
  <div class="testBox">html引入css</div>
  <flexCom />

  <importTemplate
    ref="importRef"
    downloadUrl="/asswys/archives/customer/importTemplate"
    title="客户档案"
    @loadList="loadListFunc"
  />
</template>

<script setup>
import * as echarts from "echarts";
import { useCounterStore } from "@/stores/counter";
import { useUserStore } from "@/stores/user";
import { ref, computed, onMounted, getCurrentInstance, nextTick } from "vue";
import printing from "@/components/printing/index.vue";
import importTemplate from "@/components/ImportTemplate/index.vue";
import flexCom from "@/components/flexCom/index.vue";
const { proxy } = getCurrentInstance();
const { sys_yes_no } = proxy.useDict("sys_yes_no");
const counter = useCounterStore();
const useStore = useUserStore();
const timeVal = ref(proxy.parseTime(new Date()));
const activeIndex = ref(1);
import { useRouter } from "vue-router";
const router = useRouter();

var moveZeroes = function (nums) {
  let arr = []; //用来计算我当前删除了几个0，删除就加push0
  for (let i = 0; i < nums.length; i++) {
    if (nums[i] === 0) { 
      nums.splice(i, 1);
      i--; //每次删除需要往前退一位，否则遍历不到前一个
      arr.push(0);
    }
  }

  arr.forEach((e) => {
    nums.push(0);
  });

  return nums;
};
console.log("moveZeroes", moveZeroes([0, 0, 1]));
/**点击打印*/
const printingFun = () => {
  let result = {
    name: "LCW",
    age: 26,
  };
  nextTick(() => {
    proxy.$refs.printingRef.printData = result;
    proxy.$refs.printingRef.updateFun();
    proxy.$refs.printingRef.print();
  });
};

const headUrl = () => {
  return new URL(`@/assets/images/head.jpg`, import.meta.url).href;
};

const headUrlTwo = new URL(`@/assets/images/head.jpg`, import.meta.url).href;

/**点击动态路由*/
const handleSelect = (e) => {
  router.push({ path: e });
};

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("main"));
  // 绘制图表
  myChart.setOption({
    title: {
      text: "",
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
        barWidth: 20, // 设置柱子的宽度
      },
    ],
  });
});

//数组去重
let temp = [1, 2, 3, 9, 9, 7, 1, 3];
let result = [...new Set(temp)];
console.log("mySet", result); //1，2，3，9，7
//道阻且长，行则将至，行而不辍，未来可期

console.log("publicTitle===", publicTitle);

console.log(++[[]][+[]] + [+[]]); //打印结果：10    +号会将[]转换为字符串在相加，最后等于0

/**手写一个防抖*/
const fdNum = ref(0);
const setFdNum = () => {
  fdNum.value++;
};

const fdFunc = (func, t) => {
  console.log(1);
  let timer;
  const fn = () => {
    console.log(2);
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func(); //调用更新
    }, t);
  };
  return fn;
};
const tempFunc = fdFunc(setFdNum, 500);

/**手写一个节流*/
const throttleNum = ref(0);
const setthrottleNum = () => {
  throttleNum.value++;
};

const tempFuncTwo = (func, t) => {
  console.log(1);
  let timer;
  const fn = () => {
    console.log(2);
    if (!timer) {
      timer = setTimeout(() => {
        func(); //调用更新
        timer = null; //这里不能使用clearTimeout去清除定时器，因为定时器还在运行中
      }, t);
    }
  };
  return fn;
};
const throttleFunc = tempFuncTwo(setthrottleNum, 1000);

/**导入方法*/
const handleImport = () => {
  proxy.$refs.importRef.handleImport("/asswys/archives/customer/import");
};

const loadListFunc = () => {
  proxy.$message.success("导入成功");
};

let arr = [1, 2, 3, 4];
let newArr = arr.reduce((prev, current) => {
  return prev + current;
});
console.log(newArr); //打印结果：10

let arrObj = [
  {
    id: 1,
    num: 10,
  },
  {
    id: 2,
    num: 20,
  },
  {
    id: 3,
    num: 30,
  },
];
let newArrNum = arrObj.reduce((prev, current) => {
  return prev + current.num;
}, 0); //此处必须设置初始值为0，否则prev等于第一个对象
console.log(newArrNum); //打印结果：60


</script>

<style lang="scss" scoped>
.content {
  padding: 10px;
}
.title {
  font-size: 20px;
  font-weight: bold;
  color: #464646;
}
.twoTitle {
  font-size: 16px;
  font-weight: bold;
  color: #707070;
}
.catBox {
  position: fixed;
  right: 30px;
  top: 10px;
  text-align: center;
  img {
    width: 150px;
  }
}
</style>